    
<body>
    Consultar Accidente
    <div id="tabsaccidente">
        <ul id="tablist">
            <li id="tabs-1-tab"><a href="#tabs-1">Consultar Accidente</a></li>
            <li id="tabs-2-tab"><a href="#tabs-2" onClick="consultar('list')" >Historico</a></li>
        </ul>
        <div id="tabs-1">
    <table align="center">
        <tr>
            <td>
                Parte N°
            </td>
            <td>
                <input name="id_accidente" id="id_accidente"/>
            </td>
        </tr>
         <tr>
            <td>
                <div id="info" > 
                    <br/>
                    id_accidente: <br/>
                    tipo_accidente:  <br/>
                    fecha:  <br/>
                    hora:  <br/>
                    turno:  <br/>
                    causa:  <br/>
                    direccion:  <br/>
                    parroquia:  <br/>
                    municipio:  <br/>
                    estado:  <br/>
                    observaciones:  <br/>
                    placa_funcionario_guardia:  <br/>
                    placa_funcionario_auxiliar:  <br/>

                    <br/><br/><br/>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <p>
                    <span class="art-button-wrapper">
                        <span class="art-button-l"> </span>
                        <span class="art-button-r"> </span>
                        <a class="art-button" style="cursor: pointer;" href="javascript:consultar('get')">Consultar</a>
                    </span>
                </p>
            </td>
       
        <td>
            <p>
                <span class="art-button-wrapper">
                    <span class="art-button-l"> </span>
                    <span class="art-button-r"> </span>
                    <a class="art-button" style="cursor: pointer;" href="javascript:limpiar()">Limpiar</a>
                </span>
            </p>
        </td>
    </tr>

</table>
<div id="respuesta"></div>
</div>
        <div id="tabs-2">
            <div id="infoTodos" >
                
            </div>
        </div>
    </div>
<script>
    function consultar(tipoConsulta){			
        console.log(">>>" + $("#id_accidente").get(0).value);
        //Con jquery obtengo los id de cada input que estan en mi pagina html.
        if (tipoConsulta == "get") {
                var params = {id_accidente: $("#id_accidente").get(0).value, accion:'consultar'}
            } else if(tipoConsulta == "list"){
                var params = {id_accidente: '', accion:'consultar'}
            }
         $.ajax({
                data: params,
                type: "POST",
                dataType: "json",
                url: "../controladores/AccidenteControlador.php",
               success: function(data){                    
                    console.log(data);
                    if (tipoConsulta == "get") {
                        info(data); 
                    } else if(tipoConsulta == "list"){
                        infoTodos(data);
                    }   
                },
                statusCode: {
                    404: function() {
                        
                        console("page not found");
                    }
                },
                complete: function(objeto, exito){
                    console.log("objeto: " + objeto)
                    console.log("exito:" + exito)
                   
                }   
            });
        }
        
          function info(data) {
            $("#info").html('');
            $.each(data,function(index,item) {
                $("#info").append("<br/>");
                $("#info").append("id_accidente: "+item.id_accidente+"<br/>");
                $("#info").append("tipo_accidente: "+item.tipo_accidente+"<br/>");
                $("#info").append("fecha: "+item.fecha+"<br/>");
                $("#info").append("hora: "+item.hora+"<br/>");
                $("#info").append("turno: "+item.turno+"<br/>");
                $("#info").append("causa: "+item.causa+"<br/>");
                $("#info").append("direccion: "+item.direccion+"<br/>");
                $("#info").append("parroquia: "+item.parroquia+"<br/>");
                $("#info").append("municipio: "+item.municipio+"<br/>");
                $("#info").append("estado: "+item.estado+"<br/>");
                $("#info").append("observaciones: "+item.observaciones+"<br/>");
                $("#info").append("placa_funcionario_guardia:"+item.placa_funcionario_guardia+"<br/>");
                $("#info").append("placa_funcionario_auxiliar: "+item.placa_funcionario_auxiliar+"<br/>");
                
                
                $("#info").append("<br/><br/><br/>");
            });
        }  
  function infoTodos(data) {
            $("#infoTodos").html('');
            $("#infoTodos").append("<br/>");
            var tabla="";
            tabla = "<table border='2'>";
            tabla += "<tr><td>Parte Nro</td><td>tipo de Accidente</td><td>fecha</td><td>hora</td><td>turno</td><td>causa</td><td>direccion</td><td>parroquia</td><td>municipio</td><td>estado</td><td>observaciones</td><td>Funcionario Guardia</td><td>Funcionario Aux</td></tr>";
            $.each(data,function(index,item) {
                tabla += "<tr>";
                tabla += "<td>" + item.id_accidente + "</td>";
                tabla += "<td>" + item.tipo_accidente + "</td>";
                tabla += "<td>" + item.fecha + "</td>";
                
                tabla += "<td>" + item.hora + "</td>";
                tabla += "<td>" + item.turno + "</td>";
                tabla += "<td>" + item.causa + "</td>";
                tabla += "<td>" + item.direccion + "</td>";
                
                
                
                tabla += "</tr>";
            });
            tabla += "</table>";
            $("#infoTodos").append(tabla);
        }
        $("#tabsaccidente").tabs();
    
    
</script>

</body>

